<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS_浮动</title>
	<style>
		/*CSS重置*/
		*{padding:0;margin:0;}
		
		
		
		
		
		/*#div1{
			border:1px solid red ;
			width: 300px;
			height: 300px;
			overflow: visible;
		}
		h1{border:1px solid green;
			width: 200px;
            float: left;
		}

		!**清除左浮动及右浮动带来影响.*!
		.clear{clear:both;}*/

		#div2{
			border:1px solid red;
			width: 200px;
			height: 200px;
		}

		#div2 div{width: 100px; height: 100px; float: left;}
        #div2 div:nth-child(1){background-color: red;}
        #div2 div:nth-child(2){background-color: green;}
        #div2 div:nth-child(3){background-color: blue;}
        #div2 div:nth-child(4){background-color: cyan;}


	</style>
</head>
<body>



	<h2>田字格练习</h2>
	<div id="div2">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>

	<hr>
	<div id="div1">
		<h1>this is a h1</h1>
		<div class="clear"></div>
		<p >this is a p</p>
	</div>

</body>
</html>